<template>
  <div>
    <div class="button-row">
      <el-button type="primary" @click="goToModelManagePage">返回</el-button>
    </div>
    <h2 class="model-name">{{modelName}}</h2>
    <div class="selected-wrap">
      <el-alert :closable="false" type="success" effect="dark">
        <template slot="title">
          <span>已选择机构（点击图标取消选择）</span>
          <el-button type="primary" size="mini" @click="unselectAllOrg(id)">全部取消</el-button>
        </template>
      </el-alert>
      <div class="tags-wrap">
        <el-tag
          v-for="item of selectedOrgList"
          :key="item.id"
          type="primary"
          effect="dark"
          @click="unselectOrg(item.id)"
        >{{item.name}}</el-tag>
      </div>
    </div>
    <div class="unselected-wrap">
      <el-alert :closable="false" type="info" effect="dark">
        <span>未选择机构（点击图标选择）</span>
        <el-button type="primary" size="mini" @click="selectAllOrg(id)">全部选择</el-button>
      </el-alert>
      <div class="tags-wrap">
        <el-tag
          v-for="item of unselectedOrgList"
          :key="item.id"
          type="warning"
          effect="dark"
          @click="selectOrg(item.id)"
        >{{item.name}}</el-tag>
      </div>
    </div>
  </div>
</template>
<script>
import { Input, Button, Alert, Tag } from "element-ui";
import {
  getScoreModelOrgInfo,
  addScoreModelOrgLink,
  removeScoreModelOrgLink,
  addAllScoreModelOrgLink,
  removeAllScoreModelOrgLink
} from "@/api/score.js";
export default {
  name: "score-model-org",
  components: {
    [Input.name]: Input,
    [Button.name]: Button,
    [Alert.name]: Alert,
    [Tag.name]: Tag
  },
  data() {
    return {
      id: null,
      modelName: null,
      selectedOrgList: [],
      unselectedOrgList: []
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getModelOrgInfo();
  },
  methods: {
    goToModelManagePage() {
      this.$router.push({ path: "/score-model" });
    },
    getModelOrgInfo() {
      getScoreModelOrgInfo(this.id)
        .then(res => {
          this.modelName = res.scoreModelName;
          this.selectedOrgList = res.selectedOrgList;
          this.unselectedOrgList = res.unselectedOrgList;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    selectOrg(orgId) {
      addScoreModelOrgLink({
        modelId: this.id,
        orgId: orgId
      })
        .then(res => {
          this.getModelOrgInfo();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    unselectOrg(orgId) {
      removeScoreModelOrgLink({
        modelId: this.id,
        orgId: orgId
      })
        .then(res => {
          this.getModelOrgInfo();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    selectAllOrg(modelId) {
      addAllScoreModelOrgLink(modelId)
        .then(res => {
          this.getModelOrgInfo();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    unselectAllOrg(modelId) {
      removeAllScoreModelOrgLink(modelId)
        .then(res => {
          this.getModelOrgInfo();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.model-name {
  padding-left: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

.selected-wrap, .unselected-wrap {
  border: 1px solid #ddd;
  padding: 5px;
  margin: 5px;
  min-height: 100px;

  .el-alert {
    margin-bottom: 5px;
  }

  .tags-wrap {
    .el-tag {
      margin-right: 5px;
      margin-bottom: 5px;
      cursor: pointer;

      &:hover {
        color: black;
        background-color: #ccc;
      }
    }
  }
}
</style>